<template>
	<view class="app">
		<!-- 页面内容开始 -->

		<view class="goods-top-nav">
		  <text>退款商品</text>
		</view>
		<view class="goods-list">
			<view class="goods-item" v-for="(item,index) in data.orderInfo.goods_sku_list" :key="index" v-if="item.maxApplyNum > 0">
				<view class="goods-check-box" :class="item.selected ? 'checked':''" @click="goodsSelected(item)"></view>
				<view class="goods-content">
					<view class="goods-cover">
						<image :src="item.image" class="image" mode="aspectFill"></image>
					</view>
					<view class="goods-content-box">
						<view class="goods-title">
							{{ item.goods_name }}
						</view>
						<view class="goods-sku-name">
							{{ item.sku_name }}
						</view>
						<view class="price-box">
							<view class="real-price">
								{{ vk.pubfn.priceFilter(item.real_price) }}
							</view>
							<view class="goods-number-box">
								<u-number-box v-model="data.orderInfo.goods_sku_list[index].applyRefundNum" :min="0" :max="item.maxApplyNum" :disabled-input="true"></u-number-box>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="goods-bottom-nav">
			<view style="flex: 1;">
				<view class="goods-check-box" :class="isAllSelectedCom ? 'checked':''" @click="goodsAllSelected"></view>
				<text style="margin-left: 20rpx;" @click="goodsAllSelected">全选</text>
			</view>
			<view class="vk-btn sure-refund" @click="sureRefund">确定</view>
		</view>
		<!-- 页面内容结束 -->
		<!-- 全局公共浮球导航模块 -->
		<vk-data-float-ball :scroll-top="scrollTop"></vk-data-float-ball>
		<vk-data-loading v-model="loading"></vk-data-loading>
	</view>
</template>

<script>
	var vk = uni.vk; // vk依赖
	export default {
		data() {
			// 页面数据变量
			return {
				// init请求返回的数据
				data:{
					orderInfo:{
						goods_sku_list:[]
					}
				},
				// 表单请求数据
				form1:{

				},
				scrollTop:0,
				loading:false
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		// 监听 - 页面每次【加载时】执行(如：前进)
		onLoad(options = {}) {
			vk = uni.vk;
			this.options = options;
			this.init(options);
		},
		// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
		onReady(){},
		// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
		onShow() {},
		// 监听 - 页面每次【隐藏时】执行(如：返回)
		onHide() {},
		// 监听 - 点击右上角转发时 https://uniapp.dcloud.io/api/plugins/share.html#onshareappmessage
		onShareAppMessage(options) {

		},
		// 函数
		methods: {
			// 页面数据初始化函数
			init(options){
				let that = this;
				// 获取订单详情
				vk.callFunction({
					url: 'client/order.getInfo',
					loading:true,
					data:{
						_id: options._id,
					},
					success:(data) => {
						data.orderInfo.goods_sku_list.map((goods, index) => {
							let { buy_num, refund_num=0 } = goods;
							goods.maxApplyNum = buy_num - refund_num;
							goods.applyRefundNum = goods.maxApplyNum;
							goods.selected = true;
						});
						that.data.orderInfo = data.orderInfo;
					}
				});
			},
			goodsSelected(goods){
				goods.selected = !goods.selected;
			},
			goodsAllSelected(){
				let that = this;
				let selected = !that.isAllSelectedCom;
				that.data.orderInfo.goods_sku_list.map((goods, index) => {
					goods.selected = selected;
				});
			},
			sureRefund(){
				let that = this;
				if (that.selectedListCom.length === 0) {
					vk.alert('请选择需要退款的商品!',"提示","好的");
					return false;
				}
				let goodsNum = 0;
				that.selectedListCom.map((item, index) => {
					goodsNum += item.applyRefundNum;
				});
				if (goodsNum === 0) {
					vk.alert('请选择需要退款的商品!',"提示","好的");
					return false;
				}
				vk.navigateTo({
					url: `./goods-refund-confirm?_id=${that.options._id}`,
					events: {
						// 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
						update: (data) => {
							const eventChannel = that.getOpenerEventChannel();
							if (eventChannel.emit) eventChannel.emit('update', data); // 触发A页面的 update 监听事件
						}
					},
					success: (res) => {
						// 通过eventChannel向被打开页面传送数据
						res.eventChannel.emit('data', {
							goods_sku_list: that.selectedListCom,
							orderInfo: that.data.orderInfo
						});
					}
				});
			}
		},
		// 监听器
		watch:{

		},
		// 计算属性
		computed:{
			// 是否全选
			isAllSelectedCom(){
				let key = true;
				this.data.orderInfo.goods_sku_list.map((goods, index) => {
					if (!goods.selected) {
						key = false;
					}
				});
				return key;
			},
			// 当前选中的商品列表
			selectedListCom(){
				let list = [];
				this.data.orderInfo.goods_sku_list.map((goods, index) => {
					if (goods.selected) {
						list.push(goods);
					}
				});
				return list;
			}
		}
	}
</script>
<style lang="scss" scoped>
.app{
	background-color: #f3f3f3;
	min-height: calc(100vh - var(--window-bottom) - var(--window-top));
}
.goods-check-box{
	font-family:"uicon-iconfont";
	display: inline-block;
	vertical-align: middle;
	width: 36rpx;
	height: 36rpx;
	border: 1rpx solid #EBEBEB;
	border-radius: 50%;
	background: #fff;
	box-sizing: border-box;
	line-height: 36rpx;
	color: #F93D28;
}
.goods-check-box.checked{
	background-color: #F93D28;
	color: #ffffff;
	font-size: 24rpx;
	text-align: center;
}
.goods-check-box.checked:before{
	content: "\e6a8";
}

.goods-top-nav{
	height: 80rpx;
	line-height: 80rpx;
	background-color: #fff;
	font-size: 26rpx;
	color: #333;
	padding: 0 30rpx;
	margin-top: 10rpx;
	border-bottom: 2rpx solid #f3f3f3;
}
.goods-list{
	background-color: #ffffff;
	padding: 0 30rpx 100rpx 30rpx;
	.goods-item{
		.goods-content{
			width: calc(100% - 62rpx);
			display: inline-block;
			vertical-align: middle;
			padding: 30rpx 0 20rpx 25rpx;
			.goods-cover{
				width: 186rpx;
				height: 186rpx;
				margin-right: 24rpx;
				display: inline-block;
				vertical-align: top;
				position: relative;
				.image{
					width: 100%;
					height: 100%;
				}
			}
			.goods-content-box{
				display: inline-block;
				width: calc(100% - 210rpx);
				height: 186rpx;
				position: relative;
				.goods-title{
					font-size: 26rpx;
					color: #333;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					margin-bottom: 10rpx;
					word-break: break-all;
				}
				.goods-sku-name{
					font-size: 24rpx;
					margin-bottom: 10rpx;
					color: #9a9a9a;
				}
				.price-box{
					display: flex;
					.real-price{
						color: #f93d28;
						font-size: 28rpx;
						flex: 1;
					}
					.goods-number-box{

					}
				}
			}
		}
	}
}
.goods-bottom-nav{
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	padding-left: 30rpx;
	line-height: 88rpx;
	height: 88rpx;
	z-index: 9;
	background-color: #fff;
	border-top: 1rpx solid #f3f3f3;
	display: flex;
	align-items: center;
	.sure-refund{
		height: 88rpx;
		line-height: 88rpx;
		width: 200rpx;
		text-align: center;
		color: #fff;
		font-size: 30rpx;
		background: #F93D28;
	}
}
</style>
